<template>
	<view class="exchange-cell" :style="cellStyle">
		<block v-if="item">
			<!-- 商品名称、商品图片、商品价格 -->
			<view class="one">
				<image class="goods_img" :src="item.image"></image>
				<view class="name_price">
					<view class="goods_name">
						<text>{{item.name}}</text>
					</view>
					<view class="goods_price">
						<image src="/static/excharge/1_3_2.png" class="gold"></image>
						<text class="item.price"> {{item.excharge}}</text>
					</view>
				</view>
			</view>
			<!-- 计数器和剩余数量 -->
			<view class="two">
				<!-- 传递数据给计数器组件 price单价 all_num剩余数量 order同id  allprice单个商品总价 -->
				<!-- 接受计数器组件发来的信号数据 defeat兑换失败信号 getnum单个商品的总价格和单个商品的id -->
				<jishuqi @modify="onNumChange" ref="jishuqi" :stock="item.stock" :excharge="item.excharge" @defeat="onDefeat" @noscore="onNoscore"></jishuqi>
				<text class="goods_number">剩余{{remain}}</text>
			</view>
		</block>
	</view>
</template>

<script>
	import jishuqi from '@/components/jishuqi.vue'
	export default {
		name: 'ExchangeCell',
		components: {
			jishuqi
		},
		data(){
			return {
				num: 0
			}
		},
		props: {
			item: {
				type: Object|null,
				default(){
					return {}
				}
			}
		},
		computed: {
			cellStyle(){
				if(this.item == null){
					return 'visibility: hidden'
				}
				return ''
			},
			remain(){
				if(!this.item)return 0
				return this.item.stock - this.num
			}
		},
		methods: {
			onDefeat(){
				this.$emit('defeat')
			},
			onNoscore(){
				this.$emit('noscore')
			},
			onNumChange(num){
				console.log('modify', num)
				this.num = num
				this.$store.commit('setProductNum', {
					id: this.item.id,
					num: this.num,
					excharge: this.item.excharge
				})
			},
			reset(){
				this.num = 0
				//有可能没item,所以也可能没这个计数器
				if(this.$refs.jishuqi){
					this.$refs.jishuqi.reset()
				}
			}
		}
	}
</script>

<style lang='scss'>
	.exchange-cell {
		width: 322rpx;
		height: 472rpx;
		/* border-radius: 15rpx; */
		text-align: center;
		/* padding-top: 25rpx; */
		margin-bottom: 25rpx;
		background-image: url(/static/excharge/1_4.png); 
		background-size: 100% 100%;
		
		.goods_img {
			margin-top: 25rpx;
			width: 256rpx;
			height: 205rpx;
		}
		.name_price {
			margin-top: 8rpx;
			padding-left: 36rpx;
		}
		.goods_name {
			color: white;
			display: inline-block;
			width: 65%;
			text-align: left;
		}
		.goods_number {
			color: rgb(197, 202, 211);
			display: inline-block;
			position: relative;
			top: -16rpx;
			left: -40rpx;
			width: 140rpx;
			font-size: 25rpx;
			text-align: left;
		}
		
		.goods_price {
			display: inline-block;
			width: 32%;
			color: yellow;
			height: 30rpx;
			line-height: 30rpx;
			margin-top: 6rpx;
			padding-right: 24rpx;
		}
		.goods_price .gold {
			margin-right: 8rpx;
			vertical-align: middle;
			text-align: left;
		}
		.item.price {
			vertical-align: middle;
			text-align: left;
		}
	}
	
</style>